<template>
  <div class="reset">
    <group>
      <x-input readonly placeholder="请输入手机号码" v-model="phone" type="tel">
        <span slot="label">手机号：</span>
      </x-input>
      <x-input placeholder="请输入验证码" v-model="code" type="number" :show-clear="false">
        <span slot="label">验证码：</span>
        <p slot="right" v-if="!ifSend">
          <countdown v-model="time" @on-finish="finish"></countdown>s后可重新发送
        </p>
        <agent-button class="send-msg" v-if="ifSend" slot="right" @btnClick="sendClick">发送验证码</agent-button>
      </x-input>
    </group>
    <agent-button @btnClick="nextClick" class="next" :disabled="!phone.length > 0 || !code.length > 0">下一步</agent-button>
  </div>
</template>

<script>
import { Group, XInput, Countdown } from "vux";
import AgentButton from "../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      phone: "",
      code: "",
      time: 150,
      ifSend: true
    };
  },
  components: {
    Group,
    XInput,
    AgentButton,
    Countdown
  },
  created() {
    this.phone = this.$route.query.phone;
  },
  methods: {
    nextClick() {
      this.apiService.user
        .checkvalidatecode({
          code: this.code,
          send: this.phone,
          r: Math.random()
        })
        .then(res => {
          this.$router.push("/resetPwd");
        });
    },
    finish() {
      this.ifSend = true;
    },
    sendClick() {
      this.apiService.user
        .sendvalidatecode({
          type: "mobile",
          send: this.phone,
          r: Math.random()
        })
        .then(res => {
          this.ifSend = false;
        });
    }
  }
};
</script>

<style scoped>
.reset {
  text-align: center;
}
.next {
  background-color: #108ee9;
  border: 1px solid #108ee9;
  color: #fff;
  margin: 0.5rem auto;
  width: 90%;
}
.send-msg {
  font-size: 0.24rem;
  padding: 0.15rem 0.25rem;
  margin: 0;
}
</style>

